<template>
  <div class="hash">
      <ol>
        <li>{{$t("index.period")}}</li>
        <li>{{$t("index.res")}}</li>
        <li>{{$t("index.hash")}}</li>
      </ol>
      <ul>
        <li v-for="(item,index) in chartArr.slice((page-1)*size,page*size)" :key="index">
          <div>
            <i :class="item.times<2?'red':'green'"></i>
            <span>{{item.issue}}</span>
          </div>
          <div>{{item.times}}{{$t("index.times")}}</div>
          <div>
            <p>c9db16bbb7e4ec9db16bbb7e4ec9db16bbb7e4e</p>
          </div>
        </li>
      </ul>
      <div class="page">
        <span @click="last">&lt;</span>
        <!--  v-if="page!==1" -->
        <span v-for="(item,index) in nowPage" :key="index" @click="pageTo(item,index)" :style="{background:page===item?'#FFDC3B':'',color:page===item?'#fff':''}">{{item}}</span>
        <span @click="next">&gt;</span>
         <!-- v-if="page!==nowPage.length" -->
      </div>
  </div>
</template>

<script>
import trendArr from '../../trend'
export default {
  data(){
    return{
      nowPage:[],
      pageCenter:2,//分页中心
      chartArr:trendArr,
      page:1,
      size:10
    }
  },
  created(){
    this.initPage()
  },
  computed:{
    len(){
      return Math.ceil(this.chartArr.length / this.size)
    }
  },
  methods:{
    initPage(){
      // let len = Math.ceil(this.chartArr.length / this.size);
      let len = this.len;
      if(len > 4){
        for(let i = 0; i < 4; i++){
          if(i===3){
            this.nowPage[i] = "..."
          }else{
            this.nowPage[i] = i + 1;
          }
        }
      }else{
        for(let i = 0; i < len; i++){
          this.nowPage[i] = i + 1;
        }
      }
    },
    pageTo(item,index){
      if(isNaN(item)){//点击非数字时
        if(index===0){//点击的是最左边的省略，页码中心递减
          if(this.pageCenter-2>1){
            this.pageCenter -= 2;
          }else{
            this.pageCenter = 2;
          }
        }else{//显示更多，页码显示以2递增
          if(this.pageCenter+2<this.len){
            this.pageCenter += 2;
          }else{//中心页码+2大于或等于最大页码
            this.pageCenter = this.len-1;
          }
        }
        this.page = this.pageCenter;
      }else{
        this.page = item;
      }
    },
    last(){
      if(this.page===1) return
      this.page--;
      if(this.page===1){
        this.pageCenter = 2;
      }else{
        this.pageCenter = this.page;
      }
    },
    next(){
      if(this.page===this.len) return
      this.page++;
      if(this.page===this.len){
        this.pageCenter = this.len-1;
      }else{
        this.pageCenter = this.page;
      }
    }
  },
  watch:{
    pageCenter(){
      if(this.pageCenter===2){
        this.nowPage.length = 4;
        for(let i = 0; i < 4; i++){
          if(i===3){
            this.nowPage[i] = "...";
          }else{
            this.nowPage[i] = i + 1;
          }
        }
      }else if(this.pageCenter===this.len-1){
        this.nowPage.length = 4;
        for(let i = 0; i < 4; i++){
          if(i===0){
            this.nowPage[i] = "...";
          }else{
            this.nowPage[i] = this.len + i - 3;
          }
        }
      }else{
        this.nowPage.length = 5;
        for(let i = 0; i < 5; i++){
          if(i===0||i===4){
            this.nowPage[i] = "..."
          }else{
            this.nowPage[i] = this.pageCenter - 2 + i;
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.hash{
  >ol{
    display: flex;
    font-size: .12rem;
    justify-content: space-between;
    padding: 0 .31rem;
    margin-top: .15rem;
    line-height: 2.2;
    li{
      width: calc((100% - .3rem) / 3);
      text-align: right;
    }
    >li:nth-of-type(1){
      text-align: left;
      // padding-left: .2rem;
      box-sizing: border-box;
    }
    >li:nth-of-type(2){
      text-align: center;
    }
  }
  >ul{
    margin-bottom: .15rem;
    li{
      padding: 0 .15rem;
      display: flex;
      font-size: .1rem;
      justify-content: space-between;
      border-top: solid 0.0033rem #445F74;
      height: .33rem;
      line-height: .33rem;
      >div{
        width: calc((100% - .2rem) / 3);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        >i{
          height: .133rem;
          width: .133rem;
          border-radius: 50%;
          background: #000000;
          margin-right: .08rem;
        }
        >i.red{
          background: #FE624E;
        }
        >i.green{
          background: #38E6B7;
        }
      }
      >div:nth-of-type(1){
        justify-content: flex-start;
      }
      >div:nth-of-type(2){
        justify-content: center;
      }
      >div:nth-of-type(3)>p{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .page{
    display: flex;
    justify-content: center;
    margin: .1rem 0;
    span{
      height: .33rem;
      width: .33rem;
      border-radius: .03rem;
      background: #293946;
      line-height: .33rem;
      text-align: center;
      font-size: .15rem;
      margin: 0 .07rem;
    }
  }
}
</style>